<template>
  <div v-loading="loading">
    <a-form-model :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
      <a-form-model-item label="平台名称">
        <a-input v-model="name" placeholder="请输入平台名称" />
      </a-form-model-item>
      <a-form-model-item label="平台Logo">
        <cyyUploadImg
          @uploadSuccess="
            (e) => {
              logo = e.data
            }
          "
          @deleteImg="logo = ''"
          :imgSrc="logo"
        >
        </cyyUploadImg>
      </a-form-model-item>
      <a-form-model-item label="后台Logo">
        <cyyUploadImg
          @uploadSuccess="
            (e) => {
              admin_logo = e.data
            }
          "
          @deleteImg="admin_logo = ''"
          :imgSrc="admin_logo"
        >
        </cyyUploadImg>
      </a-form-model-item>
      <a-form-model-item label="后台登录页帮助">
        <cyyUploadImg
          imgSizeText="730*200"
          @uploadSuccess="
            (e) => {
              help_logo = e.data
            }
          "
          @deleteImg="help_logo = ''"
          :imgSrc="help_logo"
        >
        </cyyUploadImg>
      </a-form-model-item>
      <a-form-model-item label="客户端加载Logo">
        <cyyUploadImg
          @uploadSuccess="
            (e) => {
              union_client_loading_logo = e.data
            }
          "
          @deleteImg="union_client_loading_logo = ''"
          :imgSrc="union_client_loading_logo"
        >
        </cyyUploadImg>
      </a-form-model-item>
      <a-form-model-item label="后台版权">
        <a-textarea v-model="admin_copyright" placeholder="请输入后台版权" :rows="4" />
      </a-form-model-item>
      <a-form-model-item label="语言选择">
        <a-select v-model="lang">
          <a-select-option value="zh-CN"> 中文 </a-select-option>
          <a-select-option value="en"> 英文 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="小程序审核模式">
        <a-radio-group v-model="shenhe">
          <a-radio :value="0"> 关闭 </a-radio>
          <a-radio :value="1"> 开启 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="预设关键词">
        <a-select mode="tags" :showArrow="false" v-model="search_keyword"> </a-select>
      </a-form-model-item>
      <!-- <a-form-model-item label="店铺入驻协议">
        <WangEditor :autoFocus="true" :value="content" @change="onProtocolChange"></WangEditor>
      </a-form-model-item> -->
      <a-form-model-item label="登录页左侧描述">
        <WangEditor :autoFocus="true" :value="describe" @change="onDescribeChange"></WangEditor>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin: 0 0 40px 0" />
        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { WangEditor } from '@/components'
import { getSaasProtocol, setSaasProtocol } from '@/api/saas/setting'
import { cyyUploadImg } from '@/components/CyyUi/index'

export default {
  name: 'SaasSettingUnion',
  components: {
    WangEditor,
    cyyUploadImg,
  },
  data() {
    return {
      loading: false,
      content: '',
      detail: '',
      describe: '',
      btnLoading: false,
      name: '',
      admin_logo: '',
      help_logo: '',
      union_client_loading_logo: '',
      admin_copyright: '',
      logo: '',
      lang: 'zh-CN',
      shenhe: 0,
      search_keyword: [],
      fix: true,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getSaasProtocol({})
        .then((res) => {
          if (res.code == 0) {
            this.fix = false
            this.content = res.data.protocol
            this.describe = res.data.describe
            this.name = res.data.name
            this.logo = res.data.logo
            this.admin_logo = res.data.admin_logo
            this.help_logo = res.data.help_logo
            this.union_client_loading_logo = res.data.union_client_loading_logo
            this.admin_copyright = res.data.admin_copyright
            this.lang = res.data.lang
            this.shenhe = res.data.shenhe
            this.search_keyword = res.data.search_keyword
            this.$nextTick(() => {
              this.fix = true
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    onProtocolChange: function (val) {
      this.detail = val
    },
    onDescribeChange: function (val) {
      this.describe = val
    },
    submitForm: function () {
      this.btnLoading = true
      this.content = this.detail
      setSaasProtocol({
        protocol: this.content,
        describe: this.describe,
        name: this.name,
        logo: this.logo,
        admin_logo: this.admin_logo,
        help_logo: this.help_logo,
        union_client_loading_logo: this.union_client_loading_logo,
        admin_copyright: this.admin_copyright,
        lang: this.lang,
        search_keyword: this.search_keyword,
        shenhe: this.shenhe.toString(),
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success('保存成功！')
          } else {
            this.$message.warning(res.msg ? res.msg : '保存失败！')
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.btnLoading = false
        })
    },
  },
}
</script>

<style scoped>
</style>
